<template>
  <div class="container">
    <div class="nav-space">
      <van-nav-bar title="更多服务"
                   fixed
                   left-arrow
                   @click-left="$router.go(-1)" />
    </div>
    <div class="wrapper"
         ref="wrapper">
      <van-grid :column-num="4"
                clickable
                :border="false">
        <van-grid-item v-for="(menu, index) in $store.getters.menus"
                       :key="index"
                       :text="menu.menuName"
                       :to="menu.beanId"
                       :badge="menu.badge">
          <template #icon>
            <van-image :src="menu.logo"
                       width="45"
                       height="45" />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import usebScroll from '@/hooks/usebScroll'
import { refreshMenuBadge } from '@/hooks/useMenu'

export default {
  setup () {
    const wrapper = ref()
    const $scroll = usebScroll()
    refreshMenuBadge()
    return {
      wrapper
    }
  }
}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: #f3f4f8;
}

::v-deep(.van-grid-item__content::after) {
  z-index: unset;
  border-width: 0 var(--van-border-width-base) var(--van-border-width-base) 0;
}
</style>